<template>
  <!-- 头部 -->
  <van-nav-bar title="地址管理" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="ellipsis" />
    </template>
  </van-nav-bar>
  <!-- 地址列表 -->
  <van-address-list
    v-model="address.chosenAddressId"
    :list="address.list"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
  />
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { getAddressList } from "@/api/index.js";
import { useRouter } from "vue-router";
let router = useRouter();

let address = reactive({
  list: [
    // {
    //   id: "1",
    //   name: "张三",
    //   tel: "13000000000",
    //   address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
    //   isDefault: true,
    // },
    // {
    //   id: "2",
    //   name: "李四",
    //   tel: "1310000000",
    //   address: "浙江省杭州市拱墅区莫干山路 50 号",
    // },
  ], // 地址列表的数据源
  chosenAddressId: "", // 选择的那个地址
});

onMounted(() => {
  getData().then(() => {
    let res = address.list.filter((item) => item.isDefault == true);
    address.chosenAddressId = res[0].id;
  });
});

async function getData() {
  await getAddressList().then((res) => {
    address.list = res.data.map((item) => {
      return {
        id: item.addressId,
        name: item.userName,
        tel: item.userPhone,
        address:
          item.provinceName +
          item.cityName +
          item.regionName +
          item.detailAddress,
        isDefault: item.defaultFlag,
      };
    });
  });
}

// 点击新增
let onAdd = () => {
  router.push("/addressAddAndEdit");
};

// 点击编辑
let onEdit = (item) => {
  // console.log("--item:", item);
   router.push("/addressAddAndEdit?addressId="+item.id);
};
</script>

<style lang="scss" scoped>
</style>